<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>陈思源的个人博客</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#FF7D00',
            dark: '#1D2129',
            light: '#F2F3F5'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
  <!-- 导航栏 -->
  <header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center">
          <a href="#" class="flex items-center">
            <span class="text-primary text-2xl font-bold">陈思源的博客</span>
          </a>
        </div>
        
        <!-- 桌面导航 -->
        <nav class="hidden md:flex space-x-8">
          <a href="#home" class="text-dark hover:text-primary transition-colors duration-200 font-medium">首页</a>
          <a href="#about" class="text-dark hover:text-primary transition-colors duration-200 font-medium">关于我</a>
          <a href="#contact" class="text-dark hover:text-primary transition-colors duration-200 font-medium">联系我</a>
        </nav>
        
        <!-- 移动端菜单按钮 -->
        <div class="md:hidden">
          <button type="button" class="text-gray-500 hover:text-primary focus:outline-none" id="menu-toggle">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div class="md:hidden hidden bg-white shadow-lg absolute w-full" id="mobile-menu">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:bg-gray-50 hover:text-primary">首页</a>
        <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:bg-gray-50 hover:text-primary">关于我</a>
        <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:bg-gray-50 hover:text-primary">联系我</a>
      </div>
    </div>
  </header>

  <main>
    <!-- 英雄区域 -->
    <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/5 to-light">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 mb-10 md:mb-0">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-4">
              你好，我是<span class="text-primary">陈思源</span>
            </h1>
            <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mb-8 max-w-xl">
              学号：20225084001<br>
              信阳师范大学<br>
              一名热爱学习和探索的网页设计学习者
            </p>
            <div class="flex flex-wrap gap-4">
              <a href="#contact" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                联系我
              </a>
            </div>
          </div>
          <div class="md:w-1/2 flex justify-center">
            <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-2xl">
              <img src="https://picsum.photos/seed/chensiyuan/400/400" alt="陈思源的个人照片" class="w-full h-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-primary/20 to-transparent"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">关于我</h2>
          <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <div class="space-y-6">
            <p class="text-gray-700 text-lg leading-relaxed">
              大家好，我是陈思源，学号是20225084001。目前就读于信阳师范大学，正在学习网页设计，对前端开发有着浓厚的兴趣。
            </p>
            <p class="text-gray-700 text-lg leading-relaxed">
              我希望通过不断学习和实践，掌握更多的前端开发技术，将来能够成为一名优秀的前端工程师。
            </p>
            <p class="text-gray-700 text-lg leading-relaxed">
              除了专业学习，我还喜欢阅读、旅行和摄影，这些爱好让我对美和设计有了更深的理解和感悟。
            </p>
            
            <div class="pt-4">
              <h3 class="font-semibold text-lg mb-3">我的技能</h3>
              <div class="grid grid-cols-2 gap-4">
                <div class="flex items-center">
                  <div class="w-2 h-2 bg-primary rounded-full mr-2"></div>
                  <span>HTML5</span>
                </div>
                <div class="flex items-center">
                  <div class="w-2 h-2 bg-primary rounded-full mr-2"></div>
                  <span>JavaScript</span>
                </div>
                <div class="flex items-center">
                  <div class="w-2 h-2 bg-primary rounded-full mr-2"></div>
                  <span>Python</span>
                </div>
                <div class="flex items-center">
                  <div class="w-2 h-2 bg-primary rounded-full mr-2"></div>
                  <span>Arcgis</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="relative">
            <div class="bg-light rounded-2xl p-6 shadow-xl">
              <div class="absolute -top-4 -right-4 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full">
                学号：20225084001
              </div>
              <img src="https://picsum.photos/seed/design/600/400" alt="网页设计工作空间" class="w-full h-auto rounded-xl shadow-lg">
              <div class="mt-6">
                <h3 class="font-semibold text-xl mb-2">我的学习目标</h3>
                <p class="text-gray-600">
                  我希望在本学期结束前，能够熟练掌握网页设计的基础知识和技能，独立完成一个完整的网站项目，并为将来从事前端开发工作打下坚实的基础。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我 -->
    <section id="contact" class="py-16 bg-light">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">联系我</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">如果你对我的博客内容感兴趣，或者有任何问题和建议，欢迎随时联系我</p>
          <div class="w-20 h-1 bg-primary mx-auto rounded-full mt-4"></div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <div class="bg-white p-8 rounded-xl shadow-lg">
            <h3 class="text-xl font-semibold mb-6">发送消息</h3>
            <form>
              <div class="mb-4">
                <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200" placeholder="请输入你的姓名">
              </div>
              <div class="mb-4">
                <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200" placeholder="请输入你的邮箱">
              </div>
              <div class="mb-6">
                <label for="message" class="block text-gray-700 font-medium mb-2">消息</label>
                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200" placeholder="请输入你想对我说的话"></textarea>
              </div>
              <button type="submit" class="w-full px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                发送消息
              </button>
            </form>
          </div>
          
          <div>
            <div class="bg-white p-8 rounded-xl shadow-lg mb-8">
              <h3 class="text-xl font-semibold mb-6">联系方式</h3>
              <div class="space-y-4">
                <div class="flex items-start">
                  <div class="bg-primary/10 p-3 rounded-full mr-4">
                    <i class="fa fa-envelope text-primary"></i>
                  </div>
                  <div>
                    <h4 class="font-medium text-gray-900">邮箱</h4>
                    <p class="text-gray-600">2382755970@qq.com</p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="bg-primary/10 p-3 rounded-full mr-4">
                    <i class="fa fa-phone text-primary"></i>
                  </div>
                  <div>
                    <h4 class="font-medium text-gray-900">电话</h4>
                    <p class="text-gray-600">16691489232</p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="bg-primary/10 p-3 rounded-full mr-4">
                    <i class="fa fa-map-marker text-primary"></i>
                  </div>
                  <div>
                    <h4 class="font-medium text-gray-900">学校</h4>
                    <p class="text-gray-600">信阳师范大学</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="bg-white p-8 rounded-xl shadow-lg">
              <h3 class="text-xl font-semibold mb-6">关注我</h3>
              <div class="flex space-x-4">
                <a href="#" class="bg-primary/10 hover:bg-primary/20 text-primary w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-200">
                  <i class="fa fa-github"></i>
                </a>
                <a href="#" class="bg-primary/10 hover:bg-primary/20 text-primary w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-200">
                  <i class="fa fa-linkedin"></i>
                </a>
                <a href="#" class="bg-primary/10 hover:bg-primary/20 text-primary w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-200">
                  <i class="fa fa-twitter"></i>
                </a>
                <a href="#" class="bg-primary/10 hover:bg-primary/20 text-primary w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-200">
                  <i class="fa fa-instagram"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">陈思源的博客</h3>
          <p class="text-gray-400 mb-4">
            学号：20225084001<br>
            信阳师范大学<br>
            记录网页设计学习之旅
          </p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
              <i class="fa fa-github"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
              <i class="fa fa-linkedin"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#home" class="text-gray-400 hover:text-white transition-colors duration-200">首页</a></li>
            <li><a href="#about" class="text-gray-400 hover:text-white transition-colors duration-200">关于我</a></li>
            <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-200">联系我</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">技能</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">HTML5</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">JavaScript</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">Python</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">Arcgis</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">订阅更新</h4>
          <p class="text-gray-400 mb-4">
            订阅我的博客，获取最新的学习动态和技术文章
          </p>
          <form class="flex">
            <input type="email" placeholder="输入你的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
            <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors duration-200">
              <i class="fa fa-paper-plane"></i>
            </button>
          </form>
        </div>
      </div>
      
      <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
        <p>&copy; 2025 陈思源的博客 | 学号：20225084001 | 信阳师范大学 | 保留所有权利</p>
      </div>
    </div>
  </footer>

  <!-- 返回顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
    <i class="fa fa-chevron-up"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    const backToTop = document.getElementById('back-to-top');
    
    window.addEventListener('scroll', function() {
      if (window.scrollY > 100) {
        navbar.classList.add('shadow-md');
        navbar.classList.remove('shadow-sm');
        backToTop.classList.remove('opacity-0', 'invisible');
        backToTop.classList.add('opacity-100', 'visible');
      } else {
        navbar.classList.remove('shadow-md');
        navbar.classList.add('shadow-sm');
        backToTop.classList.add('opacity-0', 'invisible');
        backToTop.classList.remove('opacity-100', 'visible');
      }
    });
    
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    
    menuToggle.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        // 关闭移动菜单（如果打开）
        mobileMenu.classList.add('hidden');
        
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
        }
      });
    });
    
    // 返回顶部按钮
    backToTop.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  </script>
</body>
</html>    